<template>
  <div class="box">
    <div class="top">
      <HdView />
    </div>
    <div class="bk">
<div class="main">
      <div class="title">
        <h1>问卷标签</h1>
        <div class="creator">
          <h2>创建者：{{ creator }}</h2>
        </div>
      </div>

      <div class="content">
        <Radio />
        <CheckBox />
        <CheckBox />
        <CheckBox />
        <CheckBox />
        <CheckBox />
        <CheckBox />
        <Textqs />
        <Textareaqs />
        <Fileqs />
        <div class="btn">
          <button> 提交 </button>
        </div>
      </div>
      
    </div>
    </div>
    
  </div>
</template>

<script>
import HdView from "@/components/HdView";
import Radio from "@/components/Radio";
import CheckBox from "@/components/CheckBox";
import Textqs from "@/components/Text";
import Textareaqs from "@/components/Textarea";
import Fileqs from "@/components/File";

export default {
  data() {
    return {
      creator: "一个人",
    };
  },
  components: {
    HdView,
    CheckBox,
    Radio,
    Textqs,
    Textareaqs,
    Fileqs,
  },
  methods: {
    
  },
};
</script>


<style lang="less">
* {
  color: rgba(24, 32, 56, 100);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.bk{
  
   background-image: url("#");
    background-repeat: no-repeat;
    background-size: 1440px 908px;
    background-attachment: fixed;
    margin: 0 120px auto;
    z-index: 1;
}
.main {
  width: 1170px;
  
  line-height: 20px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
    margin: 0 auto;
}
.title {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  h1{
    width: 200px;
    height: 30px;
    align-items: center;
  }
  
  .creator {
    h2 {
      margin:10px ;
    }
  }
}
.content {
  margin: 0 auto;
  background: rgb(197, 184, 163);
  width: 1040px;
  
  border-width: 20px;
  padding: 20px;
  input {
    width: auto;
    height: 30px;
  }
  .btn{
     display: flex;
      justify-items: center;
        align-items: center;

button{
   position:absolute;
   
    left: 50%;
    transform: translate(-50%,-50%);
     
width: 300px;
height: 50px;
border-radius: 4px;
background-color: rgba(255, 227, 0, 100);
color: rgba(255, 255, 255, 100);
font-size: 28px;
text-align: center;
box-shadow: 0px 2px 6px 0px rgba(24, 32, 56, 100);
font-family: Microsoft Yahei;

  }
  
  }
  
}
</style>